.pxToRem(@p, @px) {
    @{p}: @px / 75 * 1rem;
}
    body{
        background:#EFEFEF;
    }
.header{
     width:100%;
    position: fixed;
    left: 0;
    top: 0;
    .pxToRem(height, 105);
    background: #b59969;
    display: flex;
   align-items: center;
    justify-content:space-between;
    z-index: 99;
    .left{
          .pxToRem(margin-left, 30);
    }
     .right{
        .pxToRem(width, 185);
       .pxToRem(line-height, 80);
        
        text-align: center;
         
    }
  span{
            color: #FFFDEF;
        .pxToRem(font-size, 35);
   
    }
    
   
}
.main{
    width: 100%;
        .pxToRem(padding,50);
        .pxToRem(margin-top,105);
       
        p{
             width: 90%;
            .pxToRem(line-height,40);
                .pxToRem(font-size,29);
                 .pxToRem(letter-spacing,3);
                color:#3D3D3D;
        }
        figure{
            .pxToRem(margin-top,20);
            img{
                width:100%;
            }
        }
}
.list{
    color:#3F3F3F;
    .pxToRem(font-size,30);
    .pxToRem(margin-top,30);
    .pxToRem(margin-bottom,150);
    background:#F7F7F7;
    .head{
            display:flex;
            align-items:center;
        .pxToRem(height,133);
        position: relative;
        figure{
            .pxToRem(width,147);
            .pxToRem(height,69);
            background:#B29970;
            .pxToRem(line-height,69);
            text-align:center;
            color:#fff;
            .pxToRem(font-size,30);

            
            
            
        }
        .mask{
                position: absolute;
                .pxToRem(left,146);
                .pxToRem(height,69);
                .pxToRem(width,69);
                
                background:#B29970;
                border-top-right-radius:50%;
                border-bottom-right-radius:50%;
            }
    }

    .top{

        display:flex;
        justify-content:space-between;
        padding:0 2%;
        .top_one{
            .pxToRem(width,120);
            img{
                width:100%;
            }
        }
        .top_tow{
            flex:1;
            span{
                .pxToRem(line-height,100);  
                padding:0 2%;
            }
            p{
                padding:0 2%;
                color:#8B8B8B;
            }
            .span1{
                padding:1% 6%;
                background:#AC7822;
                .pxToRem(border-radius,30); 
                color:#fff;
            }

                .span2{
                padding:1% 6%;
                background:#B29C62;
                color:#fff;
                .pxToRem(border-radius,30); 
            }
        }
        .top_three{
        .pxToRem(width,80);
        text-align:center;
        color:#8B8B8B;
        
            .zt{
                 width:80%;
                 .pxToRem(font-size,100); 
               }
        

        }
    }

}
.chunk{
 .pxToRem(padding-bottom,10);
 .pxToRem(padding-top,10);
border-bottom:1px solid #E9E9E9;

    p{
        .pxToRem(line-height,50);   
        padding:0 5%;
        .pxToRem(font-size,25); 
        .pxToRem(letter-spacing,5);
    }
}
.foot{
        
        position: fixed;
        bottom:0;
        width:100%;
        background:#B59969;
            .pxToRem(height,150);
            display:flex;
            align-items:center;
        .left{
            display:flex;
            align-items:center;
            width:70%;
            justify-content:center;
            input{
                width:90%;
                .pxToRem(height,100);
                padding-left:4%;
            }
        }   
        .right{
            width:30%;
            height:80%;
            background:#C5AE82;
            text-align:center;
            .pxToRem(font-size,40);
            display:flex;
            align-items:center;
            justify-content:center;
            margin-right:3%;
            color:#fff;



        }
        input::placeholder{
            .pxToRem(font-size,30);
        }
}